<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   .echa1, .echarts{
        width: 800px;
        height: 450px;
        text-align: center;
        margin: auto;
        border: 1px solid #000;
    }
</style>
<script src="./echarts.min.js"></script>
<body>
    <div class="echarts"></div>
    <div class="echa1"></div>
</body>
<script>
    const echardom=document.querySelector('.echarts')
    const echar = echarts.init(echardom)
    const echa1=document.querySelector('.echa1')
    
    const echar1=echarts.init(echa1)
    const options={
        title:{
            text:'学习',
            subtext:'统计表'
        },
        xAxis:{
            data:['小明','小花','小侯','小越','小美']
        },
        yAxis:{

        },
        series:[
            {
                type:'bar',
                data:[99,100,80,90,31]
            }
        ]
    }
    echar.setOption(options)
    const options1={
        title:{text:'学习动态'},//设置主题名
        tooltip:{
            trigger:'axis',
            axisPointer:{
                type:'cross',
                lebel:{
                    backgroundColor:'#6a7985'
                }
            }
        },
        legend:{
            //设置图例
            data:['语文','数学','地理','历史','英语','音乐']
        },
        toolbox:{ //另存为
            feature:{
                saveAsImage:{}
            }
        },
        grid:{ //网格
            left:'3%',
            right:'4%',
            bottom:'3%',
            containLabel:true //容器标签
        },

        xAxis:[ //设置起始点的每项项目
            {
                type:'category',
                boundaryGap:false,
                data:['小红','小明','小王','小侯','小美','小婷','小梦','小春']//8ge 
            }],
            yAxis:[
                {
                    type:'value'
                }
            ],
            series:[//设置串联项
                {
                    type:'line',
                    name:'语文',
                    stack:'Total',
                    areaStyle:{},
                    emphasis:{
                        focus:'series'
                    },
                    data:[100,44,621,22,100,33,421,124]
                },
                {
                    type:'line',
                    name:'数学',
                    stack:'Total',
                    areaStyle:{},
                    emphasis:{
                        focus:'series'
                    },
                    data:[100,234,111,423,22,324,421,124]
                },
                {
                    type:'line',
                    name:'地理',
                    stack:'Total',
                   areaStyle:{},
                    emphasis:{
                        focus:'series'
                    },
                    data:[53,54,222,433,34,123,222,342]
                },
                {
                    type:'line',
                    name:'历史',
                    stack:'Total',
                    areaStyle:{},
                    emphasis:{
                        focus:'series'
                    },
                    data:[53,545,53,455,233,543,345,43]
                },
                {
                    type:'line',
                    name:'英语',
                    stack:'Total',
                    areaStyle:{},
                    emphasis:{
                        focus:'series'
                    },
                    data:[556,365,245,234,765,25,355,111]
                },
                {
                    type:'line',
                    name:'音乐',
                    stack:'Total',
                    areaStyle:{},//区域样式
                     label: {
                        show: true,
                        position: 'top'
                    },
                 
                    emphasis:{
                        focus:'series'
                    },
                    data:[444,115,21,534,22,354,554,222]
                }
            ]
    }
    echar1.setOption(options1)
</script>
</html>